<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发红包看照片</title>
    <link rel="stylesheet" href="发红包看图.css">
</head>

<body>
    <div class="blurDiv">
        <img class="blurImg" src="发红包看图.png">
        <canvas id="canvas"></canvas>
        <a href="javascript:reset()" class="button" id="buttonReset">想看我么</a>
        <a href="javascript:show()" class="button" id="buttonShow">收到红包</a>
    </div>

    <script>
        var canvasWidth = 877; // 声明画布的宽
        var canvasHeight = 672; // 声明画布的高
        var canvas = document.getElementById('canvas'); // 获取画布
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        var context = canvas.getContext('2d'); // 获取画布的上下文
        var image = new Image(); // 创建图片对象
        var radius = 50; // 声明半径
        image.src = '发红包看图.png'; // 获取图片路径
        image.onload = function(e) { // 调用初始画布方法
            initCanvas(); // 调用初始化画布方法
        }

        function initCanvas() { // 创建初始画布方法
            context.clearRect(0, 0, canvas.width, canvas.height); // 擦除整个画布内容
            context.save(); // 保存画布的绘制状态
            console.log('保存画布的绘制状态')
            context.beginPath(); // 初始化路径
            var x = Math.random() * (canvas.width - 2 * radius) + radius; // 使x始终在画布中
            var y = Math.random() * (canvas.height - 2 * radius) + radius; // 使y始终在画布中
            context.arc(x, y, radius, 0, 2 * Math.PI, true);
            context.clip(); // 剪切圆形区域
            context.drawImage(image, 0, 0)
            context.restore(); // 恢复状态
            console.log('恢复状态')
        }

        function reset() {
            initCanvas();
            console.log('想看我么')
        }

        function show() {
            // radius = 2 * Math.max(canvas.width, canvas.height);
            radius = 10000;
            initCanvas();
        }
    </script>
</body>

</html>